/**
 * @desc 饼图
 * */
import React, {Component} from 'react';
import echarts from 'echarts';
import PropTypes from "prop-types";

class ThePieChart extends Component {
    componentDidMount() {
        const myChart = echarts.init(this.pieChart);
        myChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c}%'
            },
            legend: {
                bottom: '5%',
                left: 'center',
                icon: "rect",
                selectedMode: false
            },
            grid: {
                right: 50
            },
            color: ['#f7b632', '#7193fc', '#e36fad', '#6fc7d2'],
            series: [
                {
                    name: this.props.chartTitle,
                    type: 'pie',
                    radius: ['60%', '70%'],
                    center: ['50%', '45%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 20,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    data: this.props.dataValue
                }
            ]
        });
    }

    render() {
        return <div ref={ref => this.pieChart = ref} id="pieChart" style={{width: '100%', height: '100%'}}/>
    }
}

ThePieChart.propTypes = {
    dataValue: PropTypes.array
};
ThePieChart.defaultProps = {
    dataValue: []
};
export default ThePieChart
